<template>
	<!-- 
	swiper中的transfrom会使fixed失效,此时用height固定高度; 
	swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
	-->
	<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
	<!-- top的高度等于悬浮菜单tabs的高度 -->
	<MescrollUni  :ref="'mescrollRef'+i" @init="mescrollInit"   :height="height" :top="top" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
		<!-- 数据列表 -->
		<!-- <list ref='goodsList' :list="goods"></list> -->
		<view class="list">
			<view :id="'good'+index"  v-for="(item,index) in goods" :key="index" hover-class="itemActive"   class="list-item  rounded16 " :class="item.new_class"  @click="openDuihuan(item)" >
				<image :src="item.image?item.image.file_path:'@/static/default_img/default.png'" mode="aspectFit" class="zfx"></image>
				<view class="qdwsafr">
					<view class="item-text">
							 {{item.goods_name}}
					</view>
					<view class="zhik">
							 超高折扣
					</view>
				</view>
			</view>
		</view>
	</MescrollUni> 

</template>

<script>
	import MescrollMixin from "@/components/lccg/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/lccg/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import MescrollUni from '@/components/lccg/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 空空如也 ~', // 提示
						btnText: '去看看'
					}
				},
				goods: [] ,//列表数据
				// #ifdef APP || MP-ALIPAY || MP-KUAISHOU
				top:320,
				// #endif
				top:220,
				// #ifdef MP-WEIXIN
				top:473
				// #endif
			}
		},
		props:{
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default(){
					return 0
				}
			},
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default(){
					return 0
				}
			},
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default(){
					return []
				}
			},
			jifen: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default(){
					return []
				}
			},
			height: [Number,String] // mescroll的高度
		},
		components:{
			MescrollUni
		},
		methods: {
			doSearch(word){
				this.searchDetail = word
				this.goods = []; // 先清空列表,显示加载进度
				this.mescroll.resetUpScroll();
				this.$emit("closeSearch")
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			openDuihuan(item) {
				uni.setStorageSync("goods_name",item.goods_name)
				uni.navigateTo({
					url:"/pages/card/recycling?cate_id="+item.cate_id +"&id="+item.id
				});
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				let _this = this;
				let token = uni.getStorageSync("AccessToken")
				let keyword = this.tabs[this.i].name
				let type = _this.$fxLink.checkGain()
				if(type === 9){
					this.top = 300
				}
				// let keytype = 11
				// for(let i=0;i<this.options.length;i++){
				// 	if(keyword === this.options[i].label){
				// 		keytype = this.options[i].value
				// 	}
				// }
				// tabs异步获取
				if(this.jifen.length == 0){
					setTimeout(() => {
						this.mescroll.resetUpScroll() // 重新触发upCallback
						return // 此处return,先获取tabs
					},300)
				}
				let t = ""
				let s = null
				// #ifdef MP-TOUTIAO
				t = 2
				// #endif
				// #ifdef APP-PLUS
				t = this.$fxLink.checkAppSource()
				// #endif
				// #ifdef MP-ALIPAY
				s = 1
				// #endif
				this.goods = this.jifen[this.i].list
				this.mescroll.endSuccess(this.goods.length);
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			}
		}
	}
</script>
<style lang="scss">
	.itemActive{
	        .zfx{
	            image{
	                  transform:scale(1.1)
	            }
	        }
	    }
	    // scroll-view{
	    // 	white-space: nowrap;
	    // 	/* position: fixed; */
	    // }
	    .content{
	        margin-top: 50rpx;
	    	width: 100%;
	    }
	    .content .box{
	    	height: 80rpx;
	    	line-height: 70rpx;
	    	display: flex;
	    	justify-content: space-around;
	    }
	    .content .title .texts{
	        
				transition:all  0.2s linear ;
				position: relative;
				z-index: 2;
				width: 120rpx;
				position: relative;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #626566;
				line-height: 60rpx;
				text-align: right;
				font-style: normal;
				text-transform: none;
	    }
	    .hover{
	        position: absolute;
	        z-index: 1;
	        left: 0;
	        width: 68rpx;
	        height: 56rpx;
	    }
	     .content .title1{
	         position: relative;
	         z-index: 2;
	         &::after{
	             width: 68rpx;
	             height: 56rpx;
	             content: '';
	             position: absolute;
	             left: 0;
	             top: 4rpx;
	             z-index: 1;
	             background-image:url('../../../static/hover.png')  ;
	             background-size: 68rpx 56rpx;
	         }
	     }
	   .content .title1  .texts{
	       
	    	font-family: PingFang SC, PingFang SC;
	    	font-weight: 600;
	    	font-size: 30rpx;
	    	color: #333333;
	    	line-height: 60rpx;
	    	text-align: right;
	    	font-style: normal;
	    	text-transform: none;
	       
	    }
			.bjion2{
			    position: absolute;
			    right: 0;
			    width: 100%;
			   height:208rpx;
			    background: url('../../../static/bjion1.png') no-repeat ;
			    background-size: 100% 208rpx;
			    
			}
			.bjion3{
			    position: absolute;
			    right: 0;
			    width: 100%;
			   height:208rpx;
			    background: url('../../../static/bjion3.png') no-repeat ;
			    background-size: 100% 208rpx;
			    
			}
			.bjion4{
			    position: absolute;
			     right: 0;
			     width: 100%;
			    height:208rpx;
			     background: url('../../../static/bjion2.png') no-repeat ;
			     background-size: 111% 208rpx;
			}
			.bjion5{
			    position: absolute;
			     right: 0;
			     width: 100%;
			    height:208rpx;
			     background: url('../../../static/bjion4.png') no-repeat ;
			     background-size: 111% 208rpx;
			}
	    .list{
	        display: flex;
	        flex-wrap: wrap;
	        .list-item{
	             height:166rpx;
	            width: 50%;
	            position: relative;
	            display: flex;
	            align-items: center;
	            .zfx{
	                z-index: 2;
	                position: absolute;
	                left: 20rpx;
	                top: 50rpx;
	                width: 80rpx;
	                height: 80rpx;
	                background: #FCFDFD;
	                box-shadow: 0rpx 8rpx 40rpx 0rpx #E8EBEE;
	                border-radius: 0rpx 0rpx 0rpx 0rpx;
	                border: 4rpx solid #FFFFFF;
	                background-size: 80rpx 80rpx ;
	            }

	        }
	    }
			.qdwsafr{
				margin-left: 150rpx;
			}
			.item-text{
				margin-bottom: 10rpx;
				font-weight: 600;
				font-size: 30rpx;
				color: #333333;;
				overflow:hidden;
			}
			.zhik{
				// left: 50rpx;
				position: relative;
				font-weight: 400;
				font-size: 26rpx;
				color: #ABB0B2;
			}
</style>
